<template>
	<!-- 消息 -->
	<view>
		<naviTitle tit="我的消息" />
		<view class="system flex-cb" @click="navigata">
			<view class="system_img flex align-center">
				<image src="/static/xt.png" mode=""></image>
				<view class="news">
					<view class="system_news">系统消息</view>
					<view class="system_text">更新升级提醒</view>
				</view>
			</view>
			<view class="system_num flex-c">1</view>
		</view>
		<view class="newlist" v-for="(item,index) in 3" :key="index" @click="navigata(1,item)">
			<view class="headPortrait flex-cb">
				<view class="flex align-center img">
					<image src="/static/index/1.png" mode=""></image>
					<text>绿酒春浓</text>
				</view>
				<text class="cuIcon-right"></text>
			</view>
			<view class="newContent">
				重大通知，系统即将迎来更新，给大家带来不便便
			</view>
			<view class="time">2022-07-26</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad() {},
		onShow: () => {
			uni.showTabBarRedDot({ //显示红点
				index: 2
			})
			uni.setTabBarStyle({
				backgroundColor: '#fff'
			})
		},
		methods: {
			navigata(i) {
				if (i) {
					uni.navigateTo({
						url: '/pageA/chat?user=' + item,
						fail() {
							console.log('no');
						}
					})
				}
				uni.navigateTo({
					url: '/pageA/notice?user=1',
					fail() {
						console.log('no');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.system {
		width: 710rpx;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx auto;

		.system_img {
			image {
				width: 98rpx;
				height: 98rpx;
				margin: 33rpx 30rpx;
			}

			.news {
				.system_news {
					font-size: 30rpx;
					margin-bottom: 11rpx;
					font-weight: bold;
				}

				.system_num {
					color: #999999;
					font-size: 26rpx;
				}
			}
		}

		.system_num {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background-color: #FF2E2E;
			color: #FFF;
			font-size: 26rpx;
			font-weight: bold;
			margin-right: 30rpx;
		}
	}

	.newlist {
		width: 710rpx;
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: auto;
		margin-bottom: 20rpx;
		padding: 21rpx 0 0 51rpx;

		.headPortrait {
			image {
				width: 89rpx;
				height: 89rpx;
			}

			.img {
				font-size: 34rpx;
				font-weight: bold;

				text {
					margin-left: 13rpx;
				}
			}

			.cuIcon-right {
				margin-right: 43rpx;
			}
		}

		.newContent {
			width: 616rpx;
			height: 79rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #919AA5;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 39rpx;
			margin-top: 30rpx;
			margin-bottom: 35rpx;
		}

		.time {
			color: #A7A6A9;
			font-size: 26rpx;
		}
	}
</style>
